<template>
  <div class="m-shop-list">
    <!-- 状态 -->
    <div>
      <status-tab :search-btns="searchBtns" @on-changeBtns="onChangeStatus"></status-tab>
    </div>
    <!-- 搜索条件 -->
    <div class="m-shop-search">
      <div class="o">
        <span class="title">注册时间</span>
        <div class="date dis-block">
          <div class="input dis-block">
            <w-date-picker language="ch" placeholder="起始时间" v-model="params.startTime"></w-date-picker>
          </div>
          <span class="icon">—</span>
          <div class="input dis-block">
            <w-date-picker language="ch" placeholder="结束时间" v-model="params.endTime"></w-date-picker>
          </div>
        </div>
      </div>
      <div class="o">
        <span class="title">店铺类型</span>
        <div class="o-select dis-block">
          <w-select :options="shopTypeList" v-model="params.type"></w-select>
        </div>
      </div>
      <div>
        <div class="o">
          <span class="title">店铺名称</span>
          <div class="date dis-block">
            <w-input v-model="params.company"></w-input>
          </div>
        </div>
        <div class="o">
          <span class="title">手机号码</span>
          <div class="date dis-block">
            <w-input v-model="params.contactPhone"></w-input>
          </div>
        </div>
      </div>
      <!-- 查询按钮 -->
      <div class="order-options">
        <w-button @on-click="fetchShopListSearch">搜索</w-button>
        <w-button type="option" style="margin-left: 30px" :disabled="!shopList.recordList || shopList.recordList.length == 0" @on-click="onExportGoodsList">导出EXCEL</w-button>
      </div>
    </div>

    <!-- 列表 -->
    <div class="m-list">
      <div class="check-group">
        <w-checkbox label="pageAll" v-model="pageAll" @on-change="onSelectedStorePage">
          <span>本页全选</span>
        </w-checkbox>
        <w-checkbox label="all" v-model="all" @on-change="onSelectedStore">
          <span>全部</span>
        </w-checkbox>
        <w-button type="option" @on-click="onStoreDelete">删除</w-button>
        <w-button type="option" v-if="params.status == '0'" @on-click="onReviewAll">批量审核</w-button>        
      </div>
      <div class="shop-tab-list clearfix">
        <w-table :columns="columns"></w-table>

        <div class="table-list" v-if="shopList.recordList && shopList.recordList.length > 0">
          <table v-for="(list, index) in shopList.recordList" :key="index">
            <!-- 表头信息 -->
            <tr>
              <td colspan="6">
                <div class="shop-nav-title">
                  <w-checkbox name="店铺" :label="`store${index}`" v-model="list.checked" @on-change="_setListToAllCheck"></w-checkbox>
                  <span style="padding-left: 10px">店铺类型：</span>
                  <span style="color: #2576FF">供应商</span>
                  <span style="padding-left: 20px">注册时间：{{list.addTimeString}}</span>
                </div>
              </td>
            </tr>
            <!-- 列表数据 -->
            <tr>
              <td style="width: 40%">
                <div class="goods-info clearfix">
                  <div class="goods-img fl">
                    <img v-lazy="list.storeLogoUrl" alt="">
                  </div>
                  <div class="goods">
                    <p class="p-line-hide list-c">{{list.company || list.storeName}}</p>
                    <br>
                    <span class="shop-num">商家机构号：{{list.institutionNum || '--'}}</span>
                  </div>
                </div>
              </td>
              <td style="width: 15%">
                <span class="list-c">{{list.businessContacts}}</span>
                <br>
                <span>{{list.contactPhone}}</span>
              </td>
              <td style="width: 18%">
                <span class="list-c">{{list.mainIndustry}}</span>
                <br>
                <span>主营产品：{{list.mainProducts}}</span>
              </td>
              <td style="width: 12%">
                <span class="cur list-c" style="text-decoration: underline;" @click="$router.push(`shopinfo?three=${params.threeMenuCode}&storeid=${list.id}&shopstatus=${params.status}`)">查看</span>
              </td>
              <td style="width: 15%">
                <div class="t-under" @click="$router.push(`state?three=${params.threeMenuCode}&storeid=${list.id}`)">查看营业状况</div>
                <div class="t-under" v-if="params.status == 0" @click="onShopReview(list.id)">审核</div>
                <div class="t-under" v-if="params.status == 1" @click="onShopReview(list.id)">再次审核</div>
                <div class="t-under c-main" v-if="params.status == 1" @click="onShowCause(list.cause)">查看不通过原因</div>
              </td>
            </tr>
          </table>
        </div>

        <div v-else>
          <p style="text-align: center; margin: 10px">没有更多数据了</p>
        </div>
        
        <!-- 分页 -->
        <div class="fr" style="margin-top: 10px" v-if="shopList.pageCount > 1">
          <w-paging :current="shopList.currentPage" :total="shopList.pageCount" @on-page="onChangePage"></w-paging>
        </div>
      </div>
    </div>

    <!-- 审核店铺弹框 -->
    <w-panel-fixed-wrap v-model="reviewPanel" :panel-title="true" title="提示" :width="`500px`" @on-confirm="onComfirmReview" @on-cancel="_onCancel">
      <div class="review-panel">
        <div>
          <span class="title">审核：</span>
          <div class="option">
            <w-radio v-model="reviewParams.status" name="review" :label="2">通过</w-radio>
            <w-radio style="margin-left: 30px" v-model="reviewParams.status" name="review" :label="1">不通过</w-radio>
          </div>
        </div>
        <div style="margin-top: 20px;" v-if="reviewParams.status == 1">
          <span class="title">不通过原因：</span>
          <div class="option review-cause">
            <w-input type="textarea" :holder="`请输入`" v-model="reviewParams.cause"></w-input>
          </div>
        </div>
      </div>
    </w-panel-fixed-wrap>

    <!-- 审核不通过原因弹框 -->
    <w-panel-fixed-wrap v-model="noPassPanel" :panel-title="true" :show-btns="false" title="提示" :width="`500px`" :show-close="true">
      <div class="no-pass-panel">
        <span style="vertical-align: top;">不通过原因：</span>
        <div class="cause">
          <p>{{reViewCause || '未填写'}}</p>
        </div>
      </div>
    </w-panel-fixed-wrap>
  </div>
</template>

<script>
import StatusTab from '../orderMange/components/orderSearch'
import { mapGetters, mapActions } from 'vuex'
import { apiShopMange } from 'js/api'
import { API } from 'js/const'
import { joinQueryParamsToUrl } from 'js/util'

export default {
  data() {
    return {
      searchBtns: [
        {
          title: '营业中',
          status: 2
        },
        {
          title: '待审核',
          status: 0
        },
        {
          title: '审核不通过',
          status: 1
        }
      ],
      columns: [
        {title: '店家', width: '40%'},
        {title: '店主名称', width: '15%'},
        {title: '主营', width: '18%'},
        {title: '店铺详情', width: '12%'},
        {title: '操作', width: '15%'}
      ],
      pageAll: false, // 本页全选
      all: false, // 全部选中
      // 获取店铺列表 
      params: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        currentPage: 1,
        showCount: 10,
        status: 2, // 默认展示营业中的店铺
        company: '',
        type: '',
        contactPhone: '',
        startTime: '',
        endTime: ''
      },
      // 审核
      reviewParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        status: 2,
        cause: '',
        ids: []
      },
      reViewCause: '', // 审核不通过原因
      shopList: {},
      noPassPanel: false, // 不通过原因弹框
      reviewPanel: false // 审核店铺弹框
    }
  },
  components: {
    'status-tab': StatusTab
  },
  computed: {
    ...mapGetters(['token', 'shopTypeList'])
  },
  created() {
    this.fetchShopType()
    this.fetchShopList(2)
  },
  methods: {
    ...mapActions(['fetchShopType']),
    /**
     * 搜索，重置当前页
     */
    fetchShopListSearch() {
      this.params.currentPage = 1
      this.fetchShopList(this.params.status)
    },
    /**
     * 获取店铺列表
     */
    fetchShopList(type) {
      this.params.accessToken = this.token
      if (type == 2) {
        // 获取店铺申请列表--营业中
        apiShopMange.apiShopList(this.params).then(data => {
          this.shopList = data.data || {}
          // 给每个属性添加checked属性
          this.shopList.recordList.forEach(v => {
            this.$set(v, 'checked', this.all)
          })
        })
      } else {
        // 获取店铺申请列表--待审核/审核不通过
        apiShopMange.apiShopReList(this.params).then(data => {
          this.shopList = data.data || {}
          // 给每个属性添加checked属性
          this.shopList.recordList.forEach(v => {
            this.$set(v, 'checked', this.all)
          })
        })
      }
    },
    /**
     * 切换状态,重置参数
     */
    onChangeStatus(status) {
      this.all = false
      this.pageAll = false
      this.params.currentPage = 1
      this.params.status =status
      this.params.company = ''
      this.params.type = ''
      this.params.contactPhone = ''
      this.params.startTime = ''
      this.params.endTime = ''
      this.fetchShopList(this.params.status)
    },
    /**
     * 展示不通过审核原因
     */
    onShowCause(cause) {
      this.noPassPanel = true
      this.reViewCause = cause
    },
    /**
     * 分页
     */
    onChangePage(page) {
      if (this.all) {
        this.pageAll = true
      } else {
        this.all = false
        this.pageAll = false
      }
      this.params.currentPage = page
      this.fetchShopList(this.params.status)
    },
    /**
     * 本页全选
     */
    onSelectedStorePage() {
      // 如果商品列表不存在，则直接抛出
      if (this.shopList.length == 0) {
        return
      }

      // 将当前的商品列表的选中状态和页码的全选按钮一致
      this.shopList.recordList.forEach((v) => {
        v.checked = this.pageAll
      })

      // 如果当前是全部商品全选的，则将本页全选选中
      if (!this.pageAll) {
        this.all = false
      }
    },
    /**
     * 切换全选
     */
    onSelectedStore(bool) {
      if (bool && this.shopList.recordList && this.shopList.recordList.length) {
        this.pageAll = true
        this.shopList.recordList.forEach(list => {
          list.checked = true
        })
      } else {
        this.pageAll = false
        this.shopList.recordList.forEach(list => {
          list.checked = false
        })
      }
    },
    /**
     * 判断选中的个数,是否和展示的长度相同，true相同，则选中全部，false全部取消
     */
    _setListToAllCheck() {
      this.all = true
      this.pageAll = true
      // 如果商品列表中只要有一个是未选中状态，则全选按钮也为未选中状态
      this.shopList.recordList.forEach((v) => {
        if (!v.checked) {
          this.pageAll = false
          this.all = false
        }
      })
    },
    /**
     * 删除
     */
    onStoreDelete() {
      let _this = this
      // 选中删除的店铺
      let storeIdArr = []
      if (this.shopList.recordList.length ==0 || !this.shopList.recordList) return
      this.shopList.recordList.forEach(list => {
        if (this.all) {
          storeIdArr = []
        } else if (list.checked) {
          storeIdArr.push(list.id)
        }
      })
      if (storeIdArr.length == 0 && !this.all) return // 未选中店铺时，不操作
      // 删除提示框
      this.$modal({
        title: '提示',
        content: '确认删除？',
        onConfirm() {
          // 营业中的店铺
          if (_this.params.status == 2) {
            apiShopMange.apiShopDel(_this.token, _this.$route.query.three, storeIdArr).then(data => {
              _this.$toast('删除成功！', () => {
                _this.fetchShopList(_this.params.status)
              })
            })
          } else {
            // 删除待审核，审核不通过的店铺
            apiShopMange.apiShopDelete(_this.token, _this.$route.query.three, storeIdArr, _this.params.status).then(data => {
              _this.$toast('删除成功！', () => {
                _this.fetchShopList(_this.params.status)
              })
            })
          }
        }
      })
    },
    /**
     * 展示审核弹框
     */
    onShopReview(storeId) {
      this.reviewParams.ids = []
      this.reviewPanel = true
      this.reviewParams.ids.push(storeId)
    },
    /**
     * 批量审核弹框
     */
    onReviewAll() {
      // 选中删除的店铺
      this.reviewParams.ids = []
      if (this.shopList.recordList.length ==0 || !this.shopList.recordList) return
      this.shopList.recordList.forEach(list => {
        if (this.all) {
          this.reviewParams.ids = []
        } else if (list.checked) {
          this.reviewParams.ids.push(list.id)
        }
      })
      if (this.reviewParams.ids.length == 0 && !this.all) return // 未选中店铺时，不操作
      this.reviewPanel = true
    },
    /**
     * 店铺审核
     */
    onComfirmReview() {
      this.reviewParams.accessToken = this.token
      if (this.reviewParams.status == '2') {
        this.reviewParams.cause = null
      }
      apiShopMange.apiShopReview(this.reviewParams).then(data => {
        this.$toast('审核成功！', () => {
          this.reviewParams.cause = ''
          this.reviewPanel = false
          this.all = false
          this.pageAll = false
          this.fetchShopList(this.params.status)
        })
      })
    },
    /**
     * 取消审核
     */
    _onCancel() {
      if (this.reviewParams.status == '1') {
        this.reviewParams.status = 2
        this.reviewParams.cause = null
      }
    },
    /**
     * 店铺导出
     */
    onExportGoodsList() {
      const params = {
        accessToken: this.token,
        company: this.params.company,
        contactPhone: this.params.contactPhone,
        startTime: this.params.startTime,
        endTime: this.params.endTime,
        type: this.params.type, // 店铺类型
        genre: '', // 营业0，审核1，
        status: '' // 审核中0，审核不通过1，营业中不传
      }
      if (this.params.status == 2) {
        params.genre = '0'
      } else {
        params.genre = '1'
        if (this.params.status == 0) {
          params.status = '0'
        } else if (this.params.status == 1) {
          params.status = '1'
        }
      }
      apiShopMange.apiExportShop(params).then(resp => {
        window.location.href = joinQueryParamsToUrl(`${API}store/Store/export`, params)
      })
    }
  }
}
</script>

<style lang="scss">
.m-shop-list {
  .order-options {
    .btn {
      width: 140px;
    }
  }
  .m-list {
    .btn.option {
      margin-left: 10px;
    }
    .check-group {
      .m-checkbox {
        margin-right: 10px
      }
      .btn {
        width: 70px;
        border: 1px solid #9E9E9E;
      }
    }
  }
  .review-panel {
    textarea {
      height: 120px;
    }
    .w-input .error-tip {
      margin-top: 120px;
    }
  }
}
</style>


<style lang="scss" scoped>
@import '../../scss/_var.scss';

.list-c {
  color: #313131
}
.m-shop-list {
  margin: 20px 0;
  .t-under {
    text-decoration: underline;
    font-size: 12px;
    cursor: pointer;
    color: #3693FF;
    line-height: 20px;
  }
}
.m-shop-search {
  border-bottom: 1px solid $border-gray-light;
  margin: 30px 0 0;
  padding-bottom: 20px;
  .title {
    font-size: 12px;
    width: 56px;
    text-align: right;
    display: inline-block;
    margin-right: 10px;
  }
  .icon {
    padding: 0 10px;
  }
  .dis-block {
    display: inline-block;
  }
  .o {
    margin-right: 40px;
    margin-bottom: 20px;
    display: inline-block;
  }
  .select {
    width:142px;
    height:28px; 
  }
  .o-select {
    width: 170px;
    height: 28px;
  }
  .input {
    width: 170px;
    vertical-align: middle;
  }
  .order-options {
    margin-top: 48px;
    text-align: center;
  }
}
.m-list {
  margin: 20px 0;
}
.shop-tab-list {
  margin-top: 10px;
}
.table-list {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 1px solid $border-gray-light;
  border-top: none;
  table {
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: $color-dark;
    tr {
      border-top: 1px solid $border-gray-light;
    }
  }
  .shop-nav-title {
    text-align: left;
    padding: 8px;
    background:rgba(242,242,242,1);
  }
  .goods-info {
    padding: 10px;
    .goods-img {
      width: 88px;
      height: 88px;
    }
    .goods {
      display: inline-block;
      text-align: left;
      width: 75%;
      height: 88px;
      position: relative;
    }
    .shop-num {
      position: absolute;
      bottom: 0;
    }
  }
}
.no-pass-panel {
  .cause {
    width: 78%;
    display: inline-block;
  }
}
.review-panel {
  .title {
    display: inline-block;
    width: 80px;
    text-align: right;
    vertical-align: top;
    font-size: 12px;
  }
  .option {
    display: inline-block;
  }
  .review-cause {
    width:326px;
    height:130px; 
  }
}
</style>

